<template>
  <el-form
    :model="formData"
    ref="formRef"
    @submit.prevent
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col>
        <el-form-item label="费用摘要" prop="fundsTitle">
          <el-input v-model.trim="formData.fundsTitle"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="费用类型" prop="fundsType">
          <el-input v-model.trim="formData.fundsType"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="费用科目" prop="fundsSubject">
          <el-input v-model.trim="formData.fundsSubject"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="费用金额" prop="funsMoney">
          <el-input v-model.trim="formData.funsMoney"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="附件" prop="fundsAttachmentArr">
          <el-upload
            name="uploadFile"
            multiple
            :accept="acceptTypes"
            :action="uploaComdUrl"
            :headers="uploadHeaders"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-error="handleError"
            :file-list="defaultFileList"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePreview"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="formData.remark"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row justify="end">
    <el-button>取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, reactive, PropType, onMounted } from "vue";
import { ModeType } from "../types";
import { cloneDeep } from "lodash-es";
import { useUpload } from "/@/hooks";
const {
  handleError,
  beforeAvatarUpload,
  uploaComdUrl,
  acceptTypes,
  uploadHeaders,
  onInitFileList
} = useUpload();

const handlePreview = (item: any) => {
  window.open(
    `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
  );
};
const emit = defineEmits(["emitSubmit"]);

const formRef = ref<HTMLFormElement | null>(null) as any;

const props = defineProps({
  mode: {
    type: String as PropType<ModeType>,
    default: "Add"
  },
  fundsInfo: {
    type: Object,
    default: () => {}
  },
  fundsIndex: {
    type: Number,
    default: 0
  }
});

let formData = reactive({
  fundsTitle: "",
  fundsType: "",
  fundsAttachmentArr: [],
  fundsSubject: "",
  partyB: "",
  funsMoney: "",
  directorBName: "",
  remark: ""
});

const formRules = ref({
  fundsTitle: [
    { required: true, message: "请输入合同名称", trigger: "change" }
  ],
  fundsType: [{ required: true, message: "请输入合同编号", trigger: "change" }],
  fundsAttachmentArr: [
    { required: true, message: "请上传附件", trigger: "change" }
  ]
});

/* 上传 -- start */

let defaultFileList = ref([]);

const handleRemove = (file, fileList) => {
  defaultFileList.value = fileList;
  formData.fundsAttachmentArr = formData.fundsAttachmentArr.filter(item => {
    const uuid = file.response ? file.response.data.uuidFile : file.uuidFile;
    return item.uuidFile !== uuid;
  });
};

const handleSuccess = (res, file, fileList) => {
  if (res.code === 200) {
    defaultFileList.value = fileList;
    formData.fundsAttachmentArr.push(res.data);
  }
  formRef.value.clearValidate();
};

/* 上传 -- end */

const handleSubmit = async (): Promise<any> => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  if (!isValid) return;
  const copyFormData = cloneDeep(formData);

  emit("emitSubmit", {
    mode: props.mode,
    index: props.fundsIndex,
    info: copyFormData
  });
};

onMounted(() => {
  if (props.mode === "Edit") {
    formData.fundsTitle = props.fundsInfo.fundsTitle;
    formData.fundsType = props.fundsInfo.fundsType;
    formData.fundsAttachmentArr = props.fundsInfo.fundsAttachmentArr;
    formData.fundsSubject = props.fundsInfo.fundsSubject;
    formData.partyB = props.fundsInfo.partyB;
    formData.funsMoney = props.fundsInfo.funsMoney;
    formData.directorBName = props.fundsInfo.directorBName;
    formData.remark = props.fundsInfo.remark;

    defaultFileList.value = onInitFileList(props.fundsInfo.fundsAttachmentArr);
  }
});
</script>

<style lang="scss" scoped></style>
